<template>
	<view>
		<view class="install-box">
			<view class="install-item" style="border-bottom: 1px solid gainsboro;">
				<view>报装产品<span style="color:red">*</span></view>
				<view @click="serviceProducts" style="color:blue" class="install-add"><uni-icons type="plus" color="blue" size="22"></uni-icons>添加</view>
			</view>
			<view class="install-item" style="border-bottom: 1px solid gainsboro;">
				<view>物流状态<span style="color:red">*</span></view>
				<view>
					<u-radio-group
					    v-model="radiovalue1"
					    placement="row"
					    @change="groupChange"
						
					  >
					    <u-radio
					      :customStyle="{marginBottom: '8px'}"
					      v-for="(item, index) in radiolist1"
					      :key="index"
					      :label="item.name"
					      :name="item.name"
					      @change="radioChange"
					    >
					    </u-radio>
					  </u-radio-group>
					<!-- <up-radio-group
						v-model="radiovalue"
						placement="row"
						@change="groupChange"
						>
						<up-radio 
						activeColor="blue" 
						v-for="(item, index) in radiolist"
						:key="index"
						:label="item.name"
						:name="item.name"
						@change="radioChange"
						label=""
						></up-radio>
					</up-radio-group> -->
				</view>
			</view>
			<view @click="address()" class="install-item" style="border-bottom: 1px solid gainsboro;">
				<view style="width:230rpx">服务地址<span style="color:red">*</span></view>
				<view class="install-add" :class="{ 
        'address-se': addressText!=='请选择地址', 
        'address-on': addressText ==='请选择地址',
      }" >{{addressText}}<uni-icons type="right" color="darkgray" size="20"></uni-icons></view>
			</view>
			<view @click="serviceBottom=true" class="install-item">
				<view>期望服务时间<span style="color:red;margin-right: 230rpx;">*</span></view>
				<view :class="{ 
        'address-se': addressText!=='请选择服务时间', 
        'address-on': addressText ==='请选择服务时间',
      }">{{formData.time}}</view>
				<uni-icons type="right" color="darkgray" size="20"></uni-icons>
			</view>
		</view>
		<view @click="onDisable" v-if="isDisable" style="text-align: center;font-size: 20rpx;">展开更多选填项<uni-icons type="down" color="down" size="16"></uni-icons></view>
		<view class="notRequired-box" v-if="!isDisable">
			<view class="notRequired-title">
				<view style="font-size: 28rpx;font-weight: bold;">非必填</view>
				<view style="font-size:20rpx;color:gray;margin-left: 10rpx;">填写有助于为您提供更好的服务</view>
			</view>
			<view class="install-box">
				<view class="install-item" style="border-bottom: 1px solid gainsboro;">
					<view style="margin-right: 30rpx;">备注信息</view>
					<u--input
							v-model="formData.remark"
							placeholder='帮助工程师更高效的完成服务'
							border="none"
							type="number"
					></u--input>
					<!-- <view style="color:gainsboro" class="install-add">帮助工程师更高效的完成服务<uni-icons type="right" color="darkgray" size="16"></uni-icons></view> -->
				</view>
				<view class="install-item">
					<view>是否智能产品<uni-icons type="help" color="darkgray" size="16"></uni-icons></view>
					<view>
						<up-radio-group 
							v-model="isRadio"
							placement="row"
							@change="groupChange"
							>
							<up-radio 
							activeColor="blue" 
							v-for="(item, index) in isRadiolist"
							:key="index"
							:label="item.name"
							:name="item.name"
							@change="radioChange"
							label=""
							></up-radio>
						</up-radio-group>
					</view>
				</view>
			</view>
		</view>
		<addressVue :showBottom="showBottom" @child-event="isShowBottom"></addressVue>
		<addressList :addressListBottom="addressListBottom" @child-addressList="isaddressList" @child-close="isaddressListClose"></addressList>
		<footerButton :installStandard="installStandard"></footerButton>
		<serviceTime :serviceBottom="serviceBottom" @child-service="closeServiceTime"></serviceTime>
	</view>
</template>

<script>
	import addressVue from '../../../../components/address/address.vue';
	import addressList from '../../../../components/address-list/address-list.vue';
	import footerButton from '../../../../components/footer-button/footer-button.vue';
	import serviceTime from '../../../../components/service-time/service-time.vue';
	
	export default {
		components:{footerButton,addressVue,serviceTime,addressList},
		data() {
			return {
				          // 基本案列数据
				          radiolist1: [{
				            name: '货已到',
				            disabled: false
				          },
				            {
				              name: '货未到',
				              disabled: false
				            }
				          ],
				          // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				          radiovalue1: '',
				addressText:"请选择地址",
				addressListBottom:false,
				installStandard:"install",
				formData:{
					remark:"",
					time:"请选择服务时间"
				},
				serviceBottom:false,
				showBottom:false,
				radiolist: [
					{
					name: '货已到',
					disabled: false
				  },
					{
					  name: '货未到',
					  disabled: false
					}
				],
				radiovalue:'货已到',
				isRadiolist: [
					{
					name: '是',
					disabled: false
				  },
					{
					  name: '否',
					  disabled: false
					}
				],
				isRadio:'',
				isDisable:true,
				params:""
			}
		},
		methods: {
			  groupChange(n) {
			        console.log('groupChange', n);
			      },
			      radioChange(n) {
			        console.log('radioChange', n);
			      },
			closeServiceTime(falg){
				this.formData.time=falg;
				this.serviceBottom=false;
			},
			serviceTime(){
				this.serviceBottom=true;
			},
			isShowBottom(falg){
				this.showBottom=false;
			},
			isaddressListClose(){
				this.addressListBottom=false;
			},
			isaddressList(data){
				this.addressListBottom=false;
				this.addressText=data.userName+" "+data.userMobile+" "+data.province+" "+data.city+" "+data.county+" "+data.address;
				console.log(data);
			},
			address(){
				this.addressListBottom=true;
			},
			onDisable(){
				this.isDisable=!this.isDisable;
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			serviceProducts(){
				uni.navigateTo({
					url: "/pages/index/afterSales/serviceProducts/serviceProducts"
				});
			}
		},
		// onLoad(options){
		// 	 this.params = options;
		// 	 console.log(options)
		// },
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(){
			 const params = uni.getStorageSync('installParams');
			 console.log("insatll")
			 console.log(params);
			  uni.removeStorageSync('installParams'); // 清除存储
		}
	}
</script>

<style lang="scss" scoped>
	.notRequired-box{
		margin-top: 30rpx;
	}
	.notRequired-title{
		display: flex;
		align-items: center;
		padding-left: 20rpx;
	}
	.install-box{
		background-color: white;
		border-radius: 10px;
		margin: 20rpx;
	}
	.install-item{
		margin: 0 auto;
		width:95%;
		padding:20rpx 0rpx 20rpx 0rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;
	}
	.install-add{
		align-items: center;
		display: flex;
	}
	.address-se{
		color:black;
	}
	.address-on{
		color:gainsboro;
	}
</style>
